<template>
	<div class="add-schedule">
		<u-form :model="form" ref="formRef" label-width="200">
			<u-form-item label="日期" prop="date">
				<picker mode="date" start="startDate"  @change="confirm" data-prop="date">
					<view>
						<block v-if="form.date">
							{{form.date}}
						</block>
						<span class="placeholder-label" v-else>选择日期</span>
					</view>
				</picker>
			</u-form-item>
			<u-form-item label="班次名称" prop="shiftName">
				<u-input v-model="form.shiftName" placeholder="请输入班次名称"/>
			</u-form-item>
			<u-form-item label="开始时间" prop="startTime">
				<picker mode="time" :value="form.startTime" :startTime="startTime" @change="confirm" data-prop="startTime">
					<view @click="showTimePicker" data-prop="endTime">
						<block v-if="form.startTime">
							{{form.startTime}}
						</block>
						<span class="placeholder-label" v-else>选择开始时间</span>
					</view>
				</picker>
			</u-form-item>
			<u-form-item label="结束时间" prop="endTime">
				<picker mode="time" :value="form.endTime" :startTime="startTime" @change="confirm" data-prop="endTime">
					<view @click="showTimePicker" data-prop="endTime">
						<block v-if="form.endTime">
							{{form.endTime}}
						</block>
						<span class="placeholder-label" v-else>选择结束时间</span>
					</view>
				</picker>
			</u-form-item>
		</u-form>
		<u-button @click="submit" size="medium">提 交</u-button>

	</div>
</template>

<script setup>
	import {onLoad,onReady} from "@dcloudio/uni-app"
	import {reactive,unref,ref,onMounted} from "vue"
	import {formatDateString} from "@/utils"
	import waitersApi from "@/api/waiters"
	const formRef=ref()
	const form = reactive({
		startTime:"",
		endTime:"",
		date:"",
		shiftName:"",
	})
	// const date = ref()
	const rules = {
		date: [{
			required: true,
			message: '请选择日期',
			trigger: ['change']
		}],
		shiftName:[{required: true,
			message: '请输入班次名称',
			trigger: ['change','blur']}
		],
		startTime: [{
			required: true,
			message: '请选择开始时间',
			trigger: ['change']
		}],
		endTime: [{
			required: true,
			message: '请选择结束时间',
			trigger: ['change']
		}],
	}
	const startTime = ref() // 限制开始时间
	const startDate = formatDateString(new Date(),"yyyy-MM-dd")
	let scheduleList = []
	// const scheduleList = ref([
	// 	{id:1,name:"第一个"},
	// 	{id:2,name:"第二个"},
	// 	{id:3,name:"第三个"}
	// ])
	async function getDateList(){
		const {data} = await waitersApi.getScheduleInfo()
		scheduleList = data||[]
	}

	function confirm(e){
		let {currentTarget:{dataset:{prop}},detail:{value}} = e
		switch(prop){
			case "date":
				form[prop] = value
				break
			case "startTime":
				form.endTime = ""
				form[prop] = value
				break
			case "endTime":
				form[prop] = value
				break
		}
	}
	function showTimePicker(e){
		let {prop} = e.currentTarget.dataset
		if(prop=="startTime"){
			startTime.value = ""
		} else if(prop=="endTime"){
			startTime.value = form.startTime
		}
	}
	async function submit(){
		if(!await formRef.value.validate()) return
		// const {confirm} = await uni.showModal({
		// 	content:"确认提交？"
		// })
		if(!await (await uni.showModal({
			content:"确认提交？"
		})).confirm) return
		const scheduleId = scheduleList.find(item=>item.workDate.startsWith(form.date))?.scheduleId
		let start = form.date+" "+form.startTime+":00"
		let end = form.date+" "+form.endTime+":00"
		if(scheduleId){
			const params = {scheduleId,startTime:start,endTime:end,shiftName:form.shiftName}
			await waitersApi.saveShiftInfo(params)
		}else{
			const params = {
				workDate:form.date+" 00:00:00",
				list:[{startTime:start,endTime:end,shiftName:form.shiftName}]
			}
			await waitersApi.addScheduleInfo(params)
		}

		uni.showToast({
			icon:"success",
			title:"设置成功"
		})

		uni.$emit("getWaiterSchedule")
		uni.navigateBack()

	}
	onLoad(()=>{
		getDateList()
	})
	onReady(()=>{
		formRef.value.setRules(rules);
	})
</script>

<style lang="scss">
	.add-schedule{
		padding: 20rpx;
		.placeholder-label{
			color:#cdced0;
		}
		:deep(.u-btn){
			&::after{
				border: none !important;
			}
			background-color: $theme-bg-color !important;
			color: white !important;
			width: 80%;
			display: block !important;
			margin: 20rpx auto;
		}
	}
</style>
